<template>
    <div>

      <el-dialog
  title="修改个人信息"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <el-form :model="form" :rules="rules" ref="form" label-width="150px">
      <div class="updateinfo">
  <div class="left">
      <el-form-item label="头像" prop="avatar" >
            <img style="width:110px;height:110px;display: inline;" :src="form.avatar">
            <el-upload
              action="#"
              class="avatar-uploader"
              :http-request="changeAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-switch
              v-model="form.sex"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="男"
              inactive-text="女"
              :active-value= "1"
               :inactive-value= "0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="个性签名" prop="description">
            <el-input v-model="form.description"></el-input>
          </el-form-item>

          
  </div>
  </div>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submit">提 交</el-button>
  </span>
</el-dialog>


      <div class="PersonTop">
        <div class="PersonTop_img">
          <img  :src="userAvatar" />
        </div>
        <div class="PersonTop_text">
          <div class="user_text">
            <div class="user_name">
              <span> {{userNickName}} </span>
            </div>
            <div class="user-v">
              <img src="../assets/csdnLogo.png" class="user-v-img" />
              <span class="user-v-font">优质媒体作者</span>
            </div>
            <div class="user_qianming">
              <span> {{username}}</span>
            </div>
            <div class="user_anniu">
              <el-button
                class="el-icon-edit"
                type="primary"
                size="medium"
                plain
                @click="loadUserInfo"
                >编辑</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="person_body">
        <div class="person_body_left">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span class="person_body_list" style="border-bottom: none"
                >个人中心</span
              >
            </div>
            <el-menu
              router
              active-text-color="#00c3ff"
              class="el-menu-vertical-demo"
            >
              <el-menu-item
                index="userInfo"
                :route="{ path: 'userInfo' }"
              >
                <i class="el-icon-user"></i>
                <span slot="title">个人简介</span>
              </el-menu-item>
              <el-menu-item
                index="myarticle"
                :route="{ path: 'articleEditor'}"
              >
                <i class="el-icon-edit-outline"></i>
                <span slot="title">发帖</span>
              </el-menu-item>

              <el-menu-item
                index="myquestion"
              >
                <i class="el-icon-question"></i>
                <span slot="title">问题</span>
              </el-menu-item>

              <el-menu-item
                index="mycollect"
              >
                <i class="el-icon-document"></i>
                <span slot="title">收藏</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </div>
        <div class="person_body_right">
          <router-view></router-view>
        </div>
      </div>
      <personal-dia ref="dia" />
    </div>
  </template>
  
  <script>
  import { getUserInfo,updateUserInfo,getBaseUserInfo } from '@/api/userInfo'
  import { uploadImage } from '@/api/file'

  export default{
    data(){
      return {
        userNickName:String,
        userAvatar:String,
        username:String,
        dialogVisible: false,
        form:{
          avatar:String,
          nickName:String,
          age:Number,
          sex:String,
          email:String,
          description:String,
        },

        rules: {
        nickName: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
        ],
      },
      }
    },
    created(){
      this.userNickName = this.$store.state.nickName
      this.userAvatar = this.$store.state.avatar
      this.username = this.$store.state.username
    },
    methods:{
      loadUserInfo(){
        getUserInfo().then(res =>{
            this.form.avatar = res.data.avatar;
            this.form.age = res.data.age;
            this.form.email = res.data.email;
            this.form.nickName = res.data.nickName;
            this.form.sex = res.data.sex;
            this.form.description = res.data.description;

            this.dialogVisible = true
        })
      },
      changeAvatar(file){
        const formData = new FormData()
        formData.append('file',file.file)
        uploadImage(formData).then(res=>{
          this.form.avatar = res.data.imageUrl
        })
      },
      handleAvatarSuccess(){
        this.$message.success('图片上传成功')
      },
      submit(){
        this.dialogVisible = false;
        updateUserInfo(this.form).then(res=>{
          if (res.code == 1){
            getBaseUserInfo().then(res =>{
              this.$store.commit('setNickName',res.data.nickName)
              this.$store.commit('setAvatar',res.data.avatar)
            })
            this.$message.success("修改成功，请刷新页面")
          }
          else{
            this.$message.error("修改失败")
          }
        })
      },
      handleClose(){
        this.dialogVisible = false;
      }
    }
  }
  </script>
  
  <style scoped>
  .me-video-player {
    background-color: transparent;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    position: fixed;
    left: 0;
    z-index: 0;
    top: 0;
  }
  .PersonTop {
    width: 1000px;
    height: 140px;
    padding-top: 20px;
    background-color: white;
    margin-top: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    border-radius: 5px;
  }
  
  .PersonTop_img {
    width: 150px;
    height: 120px;
    background-color: #8c939d;
    margin-right: 24px;
    margin-left: 20px;
    overflow: hidden;
    border-radius: 20px;
  }
  
  .PersonTop_img img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .PersonTop_text {
    height: 120px;
    width: 880px;
    display: flex;
  }
  
  .user_text {
    width: 60%;
    height: 100%;
    line-height: 30px;
  }
  
  .user_name {
    font-weight: bold;
  }
  .user-v {
    margin-bottom: -5px;
  }
  .user-v-img {
    width: 15px;
    height: 15px;
  }
  .user-v-font {
    font-size: 15px;
    color: #00c3ff;
  }
  .user_qianming {
    font-size: 14px;
    color: #999;
  }
  
  .user_num {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  .user_num > div {
    text-align: center;
    border-right: 1px dotted #999;
    box-sizing: border-box;
    width: 80px;
    height: 40px;
    line-height: 20px;
  }
  
  .num_text {
    color: #999;
  }
  
  .num_number {
    font-size: 20px;
    color: #333;
  }
  .el-menu-item>span {
    font-size: 16px;
    color: #999;
  }
  
  /*下面部分样式*/
  .person_body {
    width: 1000px;
    margin-top: 210px;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
  }
  
  .person_body_left {
    width: 27%;
    height: auto;
    border-radius: 5px;
    margin-right: 3%;
    text-align: center;
  }
  
  .person_body_list {
    width: 100%;
    height: 50px;
    margin-top: 25px;
    font-size: 22px;
    border-bottom: 1px solid #f0f0f0;
    background-image: -webkit-linear-gradient(
      left,
      rgb(42, 134, 141),
      #e9e625dc 20%,
      #3498db 40%,
      #e74c3c 60%,
      #09ff009a 80%,
      rgba(82, 196, 204, 0.281) 100%
    );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
  }
  
  .el-menu-item {
    margin-top: 22px;
  }
  
  .person_body_right {
    width: 70%;
    /* height: 500px; */
    border-radius: 5px;
    background-color: white;
  }
  
  .box-card {
    height: auto;
  }
  
  /*ui样式*/
  .el-button {
    width: 84px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  </style>
  